<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的消息</title>
    <link rel="stylesheet" href="../css/element-ui@2.13.0-theme-chalk-index.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/bootstrap/bootstrap.min.css">
</head>
<body>
<div id="app">
    <div class="container" style="margin-top: 50px">
        <h1 class="text-center">----我的消息----</h1>
        <el-button type="success" plain style="margin-bottom: 10px" @click="readAllMessage()">一键已读</el-button>
        <div v-for="item in messages">
            <el-card v-if="item.isDelete == 0" class="box-card message-item" >
                <div  style="display: inline-block" class="message-div" v-html="item.message">

                </div>
                <br/>
                <span class="message-time">{{item.createTime}}</span>
                <a type="success" class="pull-right" @click="readMessage(item)">点击查看</a>
            </el-card>
            <el-card v-else class="box-card message-item message-isDelete" >
                <div style="display: inline-block" class="message-div" v-html="item.message">

                </div>
                <br/>
                <span class="message-time">{{item.createTime}}</span>
                <a type="success" class="pull-right" @click="readMessage(item)">点击查看</a>
            </el-card>
        </div>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                background
                :current-page= "page.current"
                :page-sizes="[5, 10, 20, 40]"
                :page-size="page.size"
                layout = "total, sizes, prev, pager, next, jumper"
                :total="page.total"
                style="margin-bottom: 30px;margin-top: 20px">
        </el-pagination>
    </div>
</div>
<script src="../js/jquery-3.5.1.min.js"></script>
<script src="../js/vue-v2.6.11.js"></script>
<script src="../js/element-ui@2.13.0-index.js"></script>
<script src="../js/common.js"></script>
<script src="../js/apiurls.js"></script>
<script>
    const vm = new Vue({
        el:'#app',
        data:{
            messages: [],
            page: {
                //当前页
                current: 1,
                //最大页数
                total: '',
                size:10
            }
        },
        methods: {
            getMessage() {
                let that = this
                let data = {
                    "current": that.page.current,
                    "size": that.page.size
                }
                getPostData(apiUrls.message.selectMessage,data,'post', function (data) {
                    if (data.msg === 'success') {
                        that.messages = data.data.records
                        that.page.total = data.data.total
                    } else {
                        that.$message({
                            message: data.msg(),
                            type: 'error'
                        });
                    }
                })
            },
            readMessage(item) {
                let that = this
                console.log(item)
                getPostData(apiUrls.message.delMessageById,item.messageId,'post', function (data) {
                    if (data.msg === 'success') {
                        top.location.href = item.href
                    } else {
                        that.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                })
            },
            readAllMessage() {
                let that = this
                let data = ''
                getPostData(apiUrls.message.delMessage,data,'post', function (data) {
                    if (data.msg === 'success') {
                        that.$message({
                            message: "成功设置",
                            type: 'success'
                        });
                        setTimeout(function (){
                            top.location.reload()
                        },300)
                    } else {
                        that.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                })
            },
            handleSizeChange: function (size) {
                this.page.size = size;
                this.getMessage()
            },
            handleCurrentChange: function(currentPage){
                this.page.current = currentPage;
                this.getMessage()
            },
        },
        mounted() {
            this.getMessage()
        }
    })
</script>
</body>
</html>